<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

</body>
<script>
    //【1】原生js脚本加载
    // <script src = "script1.js" ><script>
    // <script src="script2-a.js"><script>
    // <script src="script2-b.js"><script>
    // <script type="text/javascript">
    //     initScript1();
    //     initScript2();
    // <script>
    // <script src="script3.js"><script>
    // <script type="text/javascript">
    //     initScript3();
    // <script>
    //【2】使用require改写上面的函数
    // require()接受两个参数，第一个数组表示所要加载的Javascript文件，第二个是加载完成后所要运行的回调函数。
    // 原生的require()不支持按次序加载，所以四个Javascript文件到底先加载哪个， 无法事前知道，
    // require()只保证这四个文件全部加载完成之后，才会运行所指定的回调函数。如果按次序加载对你很重要，你可以使用官方提供的order插件。

    // <script src="require.js"><script>

    // 　　<script type="text/javascript">
    // 　　　　require([
    // 　　　　　　"script1.js",
    // 　　　　　　"script2-a.js",
    // 　　　　　　"script2-b.js",
    // 　　　　　　"script3.js"
    // 　　　　　],function(){
    // 　　　　　　initScript1();
    // 　　　　　　initScript2();
    // 　　　　　　initScript3();
    // 　　　　　});
    // 　　<script>
    //【3】AMD 定义了一套 JS 模块依赖的异步加载标准，来解决同步加载的问题。（比如requireJs就是AMD规范）
    // 主要API
    //【3-1】(导出) 定义模块：
    // 其实有很多方法,但该方法也是官网推荐用法:
    // 匿名定义模块:
    define([依赖1, 依赖2...], () => {
        // 依赖加载完后,执行回调函数...
    });
    //【3-2】导入模块:
    // 这点和commonJS的require有点不一样,AMD需要2个参数,且有回调。
    const 变量 = require([模块名], function() {
        // 执行回调操作...
    });
</script>

</html>